<template>
  <!-- 图表 -->
  <div>
    <div class="toolbar-warp" ref="charts" id="charts">
      <!-- k线头部操作栏 -->
      <div class="periods">
        <ul>
          <li
            v-for="(item,index) in collectArray"
            :key="index"
            :class="collectCurrent==item.value?'current-text':(item.isChoose?'':'hide')"
            @click="collectClick(item.value)"
          >{{item.key}}</li>
          <li class="select-box">
            <i class="el-icon-caret-bottom icon" @mouseenter="iconHover($event)"></i>
            <ul class="nav-list" ref="navList">
              <li
                class="nav-bar"
                v-for="(item,index) in collectArray"
                :key="index"
                :class="collectCurrent==item.value?'current-text':''"
              >
                <span @click="collectClick(item.value)">{{item.key}}</span>
                <i
                  class="iconfont"
                  :class="item.isChoose?'icon-xingxing':'icon-xing'"
                  @click="collectIconClick(index)"
                ></i>
              </li>
            </ul>
          </li>
        </ul>
        <div class="border-line"></div>
        <ul class="standard-line">
          <li
            class="line-bar current-text"
            v-for="(item,index) in lineArr"
            :key="index"
          >{{item.key}}</li>
          <li class="select-box">
            <i class="el-icon-caret-bottom icon" @mouseenter="lineIconHover($event)"></i>
            <ul class="nav-list" ref="lineNavList">
              <li class="nav-bar" v-for="(item,index) in collectLineArr" :key="index">
                {{item.key}}
                <i
                  class="iconfont"
                  :class="item.isChoose?'icon-fangkuai current-text':'icon-checkbox'"
                  @click="collectLineIconClick(index,item.value)"
                ></i>
              </li>
            </ul>
          </li>
        </ul>
        <div class="border-line"></div>
        <ul class="candel-list">
          <li
            v-for="(item,index) in candleTypeArr"
            :key="index"
            :class="currentCandleType==item.key?'current-text':(item.isChoose?'':'hide')"
            @click="candleClick(item.key)"
          >
            <i class="iconfont" :class="item.key"></i>
          </li>
          <li class="select-box">
            <i class="el-icon-caret-bottom icon" @mouseenter="candleHover($event)"></i>
            <ul class="nav-list" ref="candleList">
              <li
                class="nav-bar"
                v-for="(item,index) in candleTypeArr"
                :key="index"
                :class="currentCandleType==item.key?'current-text':''"
              >
                <div @click="candleClick(item.key)">
                  <i class="iconfont" :class="item.key"></i>
                  <span>{{item.value}}</span>
                </div>

                <i
                  class="iconfont"
                  :class="item.isChoose?'icon-xingxing':'icon-xing'"
                  @click="candleTypeClick(index)"
                ></i>
              </li>
            </ul>
          </li>
        </ul>
        <div class="border-line"></div>
        <ul class="tool-box">
          <li title="技术指标">
            <i
              class="iconfont icon-jishuzhibiao"
              :class="toolIcon.target?'current-text':''
                    "
              @click="toolIcon.target=!toolIcon.target"
            ></i>
          </li>
          <li title="划线工具">
            <i
              class="iconfont icon-icon"
              :class="toolIcon.lineation?'current-text':''
                    "
              @click="toolIcon.lineation=!toolIcon.lineation"
            ></i>
          </li>
          <li title="屏幕快照">
            <i
              class="iconfont icon-xiangji"
              :class="toolIcon.camera?'current-text':''"
              @click="toolIcon.camera=!toolIcon.camera"
            ></i>
          </li>
          <li title="设置">
            <i
              class="iconfont icon-shezhi"
              :class="toolIcon.setting?'current-text':''"
              @click="toolIcon.setting=!toolIcon.setting"
            ></i>
          </li>
          <li title="全屏">
            <i
              class="iconfont"
              :class="
                      toolIcon.screen?(
                        fullscreen?'icon-zhiboshisuoxiaopingmu current-text':'icon-quanping current-text'):(fullscreen?'icon-zhiboshisuoxiaopingmu':'icon-quanping')"
              @click="fullScreen()"
            ></i>
          </li>
        </ul>
      </div>
    </div>
    <div class="k-box">
      <KCharts></KCharts>
    </div>
  </div>
</template>
<script>
import KCharts from "../charts-module/echarts-k.vue"
// import KCharts from "../charts-module/v-charts-k.vue"
export default {
  data() {
    return {
        collectArray: [
        {
          key: "分时",
          value: "time",
          isChoose: false
        },
        {
          key: "1分钟",
          value: "1min",
          isChoose: true
        },
        {
          key: "3分钟",
          value: "3min",
          isChoose: true
        },
        {
          key: "5分钟",
          value: "5min",
          isChoose: true
        },
        {
          key: "15分钟",
          value: "15min",
          isChoose: true
        },
        {
          key: "30分钟",
          value: "30min",
          isChoose: true
        },
        {
          key: "1小时",
          value: "1h",
          isChoose: true
        },
        {
          key: "2小时",
          value: "2h",
          isChoose: true
        },
        {
          key: "4小时",
          value: "4h",
          isChoose: true
        },
        {
          key: "6小时",
          value: "6h",
          isChoose: true
        },
        {
          key: "12小时",
          value: "12h",
          isChoose: true
        },
        {
          key: "1日",
          value: "1day",
          isChoose: true
        },
        {
          key: "1周",
          value: "1week",
          isChoose: true
        }
      ],
      collectCurrent: "",
      collectLineArr: [
        {
          key: "MA",
          value: "MA",
          isChoose: true
        },
        {
          key: "EMA",
          value: "EMA",
          isChoose: false
        },
        {
          key: "BOLL",
          value: "BOLL",
          isChoose: false
        },
        {
          key: "SAR",
          value: "SAR",
          isChoose: false
        },
        {
          key: "None",
          value: "None",
          isChoose: false
        }
      ],
      lineArr: [
        {
          key: "MA",
          value: "MA",
          isChoose: true
        }
      ],
      candleTypeArr: [
        {
          key: "icon-candlestickhlc",
          value: "CandleStickHLC",
          isChoose: true
        },
        {
          key: "icon-Kxian",
          value: "CandleStickHLC",
          isChoose: false
        },
        {
          key: "icon-ohlc",
          value: "OHLC",
          isChoose: false
        }
      ],
      currentCandleType: "",
      toolIcon: {
        target: false,
        lineation: false,
        camera: false,
        setting: false,
        screen: false
      },
      fullscreen: false //全屏标识
    };
  },
  components:{
      KCharts,
  },

  methods: {
       /*
     * k线维度切换
     */
    collectClick(val) {
      this.collectCurrent = val;
    },
    /*
     * 维度列表星星点击
     */
    collectIconClick(index) {
      this.collectArray[index].isChoose = !this.collectArray[index].isChoose;
    },
    /*
     * icon 悬浮
     */
    iconHover(e) {
      this.$refs.navList.style.left = e.target.offsetLeft - 5 + "px";
    },
    lineIconHover(e) {
      this.$refs.lineNavList.style.left = e.target.offsetLeft - 5 + "px";
    },
    collectLineIconClick(index, val) {
      console.log(index, val);
      if (val == "None") {
        this.lineArr = [];
        this.collectLineArr.forEach((el, index) => {
          console.log("数据", el, index);
          if (el.key != "None") {
            if (el.isChoose) {
              this.collectLineArr[index].isChoose = false;
            }
          } else {
            this.collectLineArr[index].isChoose = true;
          }
        });
        // this.collectLineArr[4].isChoose = true;
      } else {
        if (this.collectLineArr[4].isChoose) {
          this.collectLineArr[4].isChoose = false;
        }
        if (this.lineArr.length <= 1) {
          if (this.lineArr.length == 1) {
            if (this.lineArr[0].key != val) {
              this.lineArr.push(this.collectLineArr[index]);
              this.collectLineArr[index].isChoose = true;
            }
          } else {
            this.lineArr.push(this.collectLineArr[index]);
            this.collectLineArr[index].isChoose = true;
          }
        } else {
          if (this.lineArr[0].key != val && this.lineArr[1].key != val) {
            let befoKey = this.lineArr[0].key;
            this.lineArr.shift();
            this.lineArr.push(this.collectLineArr[index]);

            this.collectLineArr.forEach((el, index) => {
              console.log("数据", el, index);
              if (el.key == befoKey) {
                this.collectLineArr[index].isChoose = false;
              }
            });
            this.collectLineArr[index].isChoose = !this.collectLineArr[index]
              .isChoose;
          }
        }
      }
      console.log("处理之后的数据", this.lineArr);
    },
    /*
     * candleTypeArr
     */
    candleClick(val) {
      console.log("接受数据", val);
      this.currentCandleType = val;
    },
    /*
     * 悬浮
     */
    candleHover(e) {
      this.$refs.candleList.style.left = e.target.offsetLeft - 5 + "px";
    },
    candleTypeClick(index) {
      this.candleTypeArr[index].isChoose = !this.candleTypeArr[index].isChoose;
    },
    /*
     * 全屏点击操作
     */
    fullScreen() {
      console.log("全屏点击");
      let fullarea = document.getElementById("charts");
      if (this.fullscreen) {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 进入全屏
        if (fullarea.requestFullscreen) {
          fullarea.requestFullscreen();
        } else if (fullarea.webkitRequestFullScreen) {
          fullarea.webkitRequestFullScreen();
        } else if (fullarea.mozRequestFullScreen) {
          fullarea.mozRequestFullScreen();
        } else if (fullarea.msRequestFullscreen) {
          // IE11
          fullarea.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    }
  },

  computed: {},

  created() {},

  mounted() {}
};
</script>
<style lang="less" scoped>
.b {
  border: solid 1px red;
}
.toolbar-warp {
  display: flex;
  height: 36px;
  justify-content: space-between;
  position: relative;
  z-index: 2019;
  .periods {
    position: relative;
    display: flex;
    ul {
      display: flex;
      li {
        line-height: 36px;
        font-size: 14px;
        padding: 0 4px;
        cursor: pointer;
        color: #dcdde0;
      }
      li:hover {
        color: #fff;
      }
      .icon {
        height: 12px;
        font-size: 12px;
        transition: all 0.3s;
      }
      .select-box:hover {
        .icon {
          transform: rotate(180deg);
        }
        .nav-list {
          height: auto;
        }
      }
      .nav-list {
        position: absolute;
        flex-wrap: wrap;
        width: 100px;
        background: #1b3157;
        border-radius: 4px;
        overflow: hidden;
        height: 0px;
        top: 32px;
        .nav-bar {
          padding: 0 10px;
          height: 32px;
          display: flex;
          width: 100%;
          justify-content: space-between;
          font-size: 14px;
          .icon-xingxing {
            color: #ffbc54;
          }
          .iconfont {
            font-size: 18px;
          }
        }
        .nav-bar:hover {
          background-color: rgb(51, 69, 100);
        }
      }
    }
    .border-line {
      background: hsla(0, 0%, 100%, 0.25);
      width: 1px;
      height: 16px;
      margin: 0 4px;
      -ms-flex-item-align: center;
      align-self: center;
    }
    .standard-line {
      // .b();
      padding: 0 5px;
      line-height: 36px;
      cursor: pointer;
      color: #dcdde0;
      font-size: 14px;
    }
    .candel-list {
      .nav-list {
        width: 180px;
        li {
          span {
            width: 91px;
            text-align: left;
          }
        }
      }
    }
    .tool-box {
      li {
        position: relative;
        .iconfont {
          min-width: 16px;
          min-height: 16px;
          font-family: iconfont !important;
          font-size: 16px;
          font-style: normal;
        }
        .icon-quanping {
          font-size: 15px;
        }
        .bubble {
          position: absolute;
          font-size: 12px;
          left: -75%;
          top: 30px;
          display: block;
          line-height: 12px;
          padding: 3px 5px;
          white-space: nowrap;
          .b();
          border: solid 1px;
          border-radius: 2px;
          background-color: #121d32;
        }
        .bubble:before {
          content: "\00a0";
          width: 0px;
          height: 0px;
          display: block;
        }
      }
    }
  }
}
</style>
